<template>
	<!-- 我的果园 -->
	<view class="orchard">
		<image src="../../static/image/nongchang/bg.png" mode="" class="bg"></image>
		<!-- 当前状态 如果没有种植 -->
		<view class="left_name">
			<view class="title" v-if="myAll.user_plant.level_title && myAll.user_plant.level_title !== ''">
				<p>{{ myAll.user_plant.prop_title }}{{ myAll.user_plant.level_title }}</p>
			</view>
			<view class="title" v-else><p>肥沃空地</p></view>
			<!-- <view class="zhongzi"><image src="../../static/image/nongchang/zz1.png" mode=""></image></view> -->
		</view>
		<view class="banner">
			<image :src="bannerList.img" mode="" @click="jumpGoods"></image>
		</view>
		<!-- 右上悬浮栏 -->
		<view class="left_top_btn">
			<image src="../../static/image/nongchang/shop.png" mode="" @tap="jumpShop"></image>
			<image src="../../static/image/nongchang/cangku.png" mode="" @tap="openWarehouse"></image>
		</view>
		<!-- 水果树 -->
		<view class="mytree">
			<!-- 没有种子时的样式 -->
			<view class="nozz" v-if="!myAll.user_plant.level_title || myAll.user_plant.level_title == ''">
				<image src="../../static/image/nongchang/paizi.png" mode=""></image>
				<view class="nozz_title">
					<p class="p1">什么都没有</p>
					<p class="p2">快去播种吧</p>
				</view>
			</view>
			<!-- 如果有种植时的样式 -->
			<view class="haveZz">
				<image :src="treeList[treeStatus].url" mode="" @tap="setAnimation(treeStatus + 1)" :class="['tree' + (treeStatus + 1), 'active_tree' + current]"></image>
			</view>
			<!-- 底部土地 -->
			<image src="../../static/image/nongchang/tudi.png" mode="" class="tudi"></image>
		</view>
		<!-- 水果成长进度条 -->
		<view class="step" v-if="myAll.user_plant.level_title && myAll.user_plant.status == 0">
			<image class="shuiguo" src="../../static/image/nongchang/shuiguo.png" mode=""></image>
			<view class="step_input">
				<view class="setps" :style="{ width: myAll.user_plant.result + '%' }"><image src="../../static/image/nongchang/step.png" mode=""></image></view>
			</view>
			<view class="chengzhang">
				<image src="../../static/image/nongchang/chengzhang.png" mode=""></image>
				<text class="p1">{{ myAll.user_plant.result }}/100</text>
			</view>
			<p class="beilv">{{ myAll.user_plant.prop_result }}倍加速中</p>
		</view>
		<view class="step" v-if="myAll.user_plant.level_title && myAll.user_plant.status == 1">
			<image src="../../static/image/nongchang/lingqu.png" mode="" class="lingqu" @tap="onlingqu"></image>
		</view>
		<!-- 右侧操作栏 -->
		<view class="right_btn">
			<view class="sun" @tap="onsun">
				<image src="../../static/image/nongchang/sun.png" mode=""></image>
				<text class="icons">x{{ sunNumber }}</text>
			</view>
			<view class="huafei" @tap="onshifei">
				<image src="../../static/image/nongchang/huafei.png" mode=""></image>
				<text class="icons">x{{ huafeiNumber }}</text>
			</view>
			<view class="jiaoshui" @tap="onwatering">
				<image src="../../static/image/nongchang/jiaoshui.png" mode=""></image>
				<text class="icons">x{{ waterNumber }}</text>
			</view>
			<view class="bozhong" @tap="openBozhong"><image src="../../static/image/nongchang/bozhong.png" mode=""></image></view>
		</view>
		<!-- 底部操作栏 -->
		<view class="bottom_btns">
			<view class="btn1 one" @tap="openSunshine">
				<image src="../../static/image/nongchang/bg-1.png" mode="" class="bgt"></image>
				<image src="../../static/image/nongchang/yg.png" mode="" class="qjt"></image>
				<text>领阳光</text>
			</view>
			<view class="btn1" @tap="openWater">
				<image src="../../static/image/nongchang/bg-2.png" mode="" class="bgt"></image>
				<image src="../../static/image/nongchang/sd.png" mode="" class="qjt"></image>
				<text>领水滴</text>
			</view>
			<view class="btn1" @tap="openHuafei">
				<image src="../../static/image/nongchang/bg-3.png" mode="" class="bgt"></image>
				<image src="../../static/image/nongchang/hf.png" mode="" class="qjt"></image>
				<text>领化肥</text>
			</view>
			<view class="btn1 btn2" @tap="openSeed">
				<image src="../../static/image/nongchang/bg-4.png" mode="" class="bgt"></image>
				<image src="../../static/image/nongchang/zz.png" mode="" class="qjt"></image>
				<text>领种子</text>
			</view>
		</view>
		<!-- 操作动画 浇水-->
		<view class="operation" :style="{ opacity: waterShow == true ? '1' : '0' }">
			<view class="water">
				<image src="../../static/image/nongchang/onjiaoshui.png" mode="" :class="['waterImg', waterRotate == false ? '' : 'rotateImg']"></image>
				<image src="../../static/image/nongchang/suidi.png" mode="" :style="{ opacity: shuidiShow == true ? '1' : '0' }" class="shuidi"></image>
			</view>
		</view>
		<!-- 操作动画 施肥 -->
		<view class="operation" :style="{ opacity: huafeiShow == true ? '1' : '0' }">
			<view class="water">
				<image src="../../static/image/nongchang/onhf.png" mode="" :class="['waterImg', huafeiRotate == false ? '' : 'huafei']"></image>
				<image src="../../static/image/nongchang/huafeili.png" mode="" :style="{ opacity: onhfShow == true ? '1' : '0' }" class="shuidi huafeis"></image>
			</view>
		</view>
		<!-- 操作动画 太阳 -->
		<view class="sunlight"><image src="../../static/image/nongchang/onsun.png" :class="sunshouw == true ? 'onSun' : ''" mode=""></image></view>
		<!-- 弹出层start -->
		<!-- 播种 -->
		<uni-popup ref="sow" type="bottom">
			<view class="sow_box">
				<view class="top">
					<image src="../../static/image/nongchang/bz_title.png" mode="" class="title_img"></image>
					<image src="../../static/image/nongchang/close.png" class="close" mode="" @tap="closeSow"></image>
				</view>
				<scroll-view class="zhongzi_box" scroll-y scroll-with-animation>
					<view class="box_list" v-for="(item, index) in zhongziList" :key="index">
						<image src="../../static/image/nongchang/tuoyuan.png" class="tuoyuan" mode=""></image>
						<image :src="item.img" mode="" class="guozi"></image>
						<view class="number">
							<image src="../../static/image/nongchang/number.png" mode=""></image>
							<text>x{{ item.num }}</text>
						</view>
						<view class="title">
							<p>{{ item.title }}</p>
						</view>
						<view class="onbozhong" @tap="onsow(item)">立即播种</view>
					</view>
				</scroll-view>
				<view class="tips">每次只可以播种一颗种子~成熟后可继续播种</view>
			</view>
		</uni-popup>
		<!-- 领水滴 -->
		<uni-popup ref="water" type="bottom">
			<view class="sow_box">
				<view class="top">
					<image src="../../static/image/nongchang/lingshuidi.png" mode="" class="title_img"></image>
					<image src="../../static/image/nongchang/close.png" class="close" mode="" @tap="closeWater"></image>
				</view>
				<scroll-view class="renwu" scroll-y scroll-with-animation>
					<view class="renwu_list" v-for="(item, index) in taskList" :key="index" :style="{ background: item.do == 0 ? '#FFF9D0' : '#CCFEAA' }">
						<view class="left">
							<image src="../../static/image/nongchang/tuoyuan.png" mode="" class="bg"></image>
							<image :src="iconList[Number(item.id) - 1].icon || iconList[6].icon" mode="widthFix" class="qj"></image>
						</view>
						<view class="center">
							<p class="p1">
								{{ item.title }}
								<text v-if="Math.abs(item.total_price) > 0">{{ item.total_price }}</text>
								<text v-if="item.id == 5">{{ item.start_hour }}点~{{ item.end_hour }}点</text>
							</p>
							<p class="p2">
								奖励
								<text style="color: #FE6C14;">{{ item.prop_num }}</text>
								水滴
							</p>
						</view>
						<view class="right" v-if="item.do == 2" @click="onreceive(item)">立即领取</view>
						<view class="right" style="background-color: #8DD65D;" v-else-if="item.do == 1 && item.id !== 5" @tap="goComplete(item)">去完成</view>
						<view class="right" style="background-color: #8DD65D; opacity: 0.6;" v-else-if="item.do == 1 && item.id == 5">请等待</view>
						<view class="right" style="background-color: #8DD65D; opacity: 0.6;" v-else-if="item.do == 0">已完成</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 领阳光 -->
		<uni-popup ref="sunshine" type="bottom">
			<view class="sow_box">
				<view class="top">
					<image src="../../static/image/nongchang/lingyangguang.png" mode="" class="title_img"></image>
					<image src="../../static/image/nongchang/close.png" class="close" mode="" @tap="closeSunshine"></image>
				</view>
				<scroll-view class="renwu" scroll-y scroll-with-animation>
					<view class="renwu_list" v-for="(item, index) in taskList" :key="index" :style="{ background: item.do == 0 ? '#FFF9D0' : '#CCFEAA' }">
						<view class="left">
							<image src="../../static/image/nongchang/tuoyuan.png" mode="" class="bg"></image>
							<image :src="iconList[Number(item.id) - 1].icon || iconList[6].icon" mode="widthFix" class="qj"></image>
						</view>
						<view class="center">
							<p class="p1">
								{{ item.title }}
								<text v-if="Math.abs(item.total_price) > 0">{{ item.total_price }}</text>
								<text v-if="item.id == 5">{{ item.start_hour }}点~{{ item.end_hour }}点</text>
							</p>
							<p class="p2">
								奖励
								<text style="color: #FE6C14;">{{ item.prop_num }}</text>
								阳光
							</p>
						</view>
						<view class="right" v-if="item.do == 2" @click="onreceive(item)">立即领取</view>
						<view class="right" style="background-color: #8DD65D;" v-else-if="item.do == 1 && item.id !== 5" @tap="goComplete(item)">去完成</view>
						<view class="right" style="background-color: #8DD65D; opacity: 0.6;" v-else-if="item.do == 1 && item.id == 5">请等待</view>
						<view class="right" style="background-color: #8DD65D; opacity: 0.6;" v-else-if="item.do == 0">已完成</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 领化肥 -->
		<uni-popup ref="huafei" type="bottom">
			<view class="sow_box">
				<view class="top">
					<image src="../../static/image/nongchang/linghuafei.png" mode="" class="title_img"></image>
					<image src="../../static/image/nongchang/close.png" class="close" mode="" @tap="closeHuafei"></image>
				</view>
				<scroll-view class="renwu" scroll-y scroll-with-animation>
					<view class="renwu_list" v-for="(item, index) in taskList" :key="index" :style="{ background: item.do == 0 ? '#FFF9D0' : '#CCFEAA' }">
						<view class="left">
							<image src="../../static/image/nongchang/tuoyuan.png" mode="" class="bg"></image>
							<image :src="iconList[Number(item.id) - 1].icon || iconList[6].icon" mode="widthFix" class="qj"></image>
						</view>
						<view class="center">
							<p class="p1">
								{{ item.title }}
								<text v-if="Math.abs(item.total_price) > 0">{{ item.total_price }}</text>
								<text v-if="item.id == 5">{{ item.start_hour }}点~{{ item.end_hour }}点</text>
							</p>
							<p class="p2">
								奖励
								<text style="color: #FE6C14;">{{ item.prop_num }}</text>
								化肥
							</p>
						</view>
						<view class="right" v-if="item.do == 2" @click="onreceive(item)">立即领取</view>
						<view class="right" style="background-color: #8DD65D;" v-else-if="item.do == 1 && item.id !== 5" @tap="goComplete(item)">去完成</view>
						<view class="right" style="background-color: #8DD65D; opacity: 0.6;" v-else-if="item.do == 1 && item.id == 5">请等待</view>
						<view class="right" style="background-color: #8DD65D; opacity: 0.6;" v-else-if="item.do == 0">已完成</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 领种子 -->
		<uni-popup ref="seed" type="bottom">
			<view class="sow_box">
				<view class="top">
					<image src="../../static/image/nongchang/lingzhongzi.png" mode="" class="title_img"></image>
					<image src="../../static/image/nongchang/close.png" class="close" mode="" @tap="closeSeed"></image>
				</view>
				<scroll-view class="renwu" scroll-y scroll-with-animation>
					<view class="renwu_list" v-for="(item, index) in taskList" :key="index" :style="{ background: item.do == 0 ? '#FFF9D0' : '#CCFEAA' }">
						<view class="left">
							<image src="../../static/image/nongchang/tuoyuan.png" mode="" class="bg"></image>
							<image :src="iconList[Number(item.id) - 1].icon" mode="widthFix" class="qj"></image>
						</view>
						<view class="center">
							<p class="p1">
								{{ item.title }}
								<text v-if="Math.abs(item.total_price) > 0">{{ item.total_price }}</text>
								<text v-if="item.id == 5">{{ item.start_hour }}点~{{ item.end_hour }}点</text>
							</p>
							<p class="p2">
								奖励
								<text style="color: #FE6C14;">{{ item.prop_title }}</text>
								种子
							</p>
						</view>
						<view class="right" v-if="item.do == 2" @click="onreceive(item)">立即领取</view>
						<view class="right" style="background-color: #8DD65D;" v-else-if="item.do == 1 && item.id !== 5" @tap="goComplete(item)">去完成</view>
						<view class="right" style="background-color: #8DD65D; opacity: 0.6;" v-else-if="item.do == 1 && item.id == 5">请等待</view>
						<view class="right" style="background-color: #8DD65D; opacity: 0.6;" v-else-if="item.do == 0">已完成</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 仓库 -->
		<uni-popup ref="warehouse" type="bottom">
			<view class="sow_box" style="height: 70vh;">
				<view class="top">
					<image src="../../static/image/nongchang/Warehouse.png" mode="" class="title_img"></image>
					<image src="../../static/image/nongchang/close.png" class="close" mode="" @tap="closeWarehouse"></image>
				</view>
				<view class="myfruit">
					<p class="title">我的果实</p>
					<scroll-view scroll-x="true" class="fr_scroll" scroll-with-animation>
						<view class="lists" v-for="(item,index) in myfruit" :key="index">
							<view class="left">
								<image src="../../static/image/nongchang/tuoyuan.png" mode="" class="bj"></image>
								<image :src="item.img" mode="" class="qj"></image>
							</view>
							<view class="right">
								<p class="p1">{{item.title}}</p>
								<p class="p2" @tap="jumpNext">立即兑换</p>
							</view>
						</view>
						<p v-if="myfruit.length == 0" class="notfruit">您还没有成熟的果实~</p>
					</scroll-view>
				</view>
				<view class="myprop">
					<p class="title">我的道具</p>
					<scroll-view scroll-y="true" class="myprop_box">
						<view class="prop_list">
							<image src="../../static/image/nongchang/sd.png" mode=""></image>
							<p class="p1">水滴x{{ waterNumber }}</p>
							<p class="p2">加速果实增长</p>
						</view>
						<view class="prop_list">
							<image src="../../static/image/nongchang/yg.png" mode=""></image>
							<p class="p1">阳光x{{ sunNumber }}</p>
							<p class="p2">加速果实增长</p>
						</view>
						<view class="prop_list">
							<image src="../../static/image/nongchang/hf.png" mode=""></image>
							<p class="p1">化肥x{{ huafeiNumber }}</p>
							<p class="p2">加速果实增长</p>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			haveShow: true,
			treeList: [
				{ url: '../../static/image/nongchang/tree1.png', name: '幼苗' },
				{ url: '../../static/image/nongchang/tree2.png', name: '成树' },
				{ url: '../../static/image/nongchang/tree3.png', name: '开花' },
				{ url: '../../static/image/nongchang/tree4.png', name: '结果' },
				{ url: '../../static/image/nongchang/tree4.png', name: '成熟' }
			],
			iconList: [
				{ icon: '../../static/image/nongchang/renwu/qiandao.png', name: '签到' },
				{ icon: '../../static/image/nongchang/renwu/xiaofei.png', name: '消费' },
				{ icon: '../../static/image/nongchang/renwu/fenxiang.png', name: '分享' },
				{ icon: '../../static/image/nongchang/renwu/fenxiang.png', name: '分享' },
				{ icon: '../../static/image/nongchang/renwu/liulan.png', name: '浏览' },
				{ icon: '../../static/image/nongchang/renwu/liulan.png', name: '浏览' },
				{ icon: '../../static/image/nongchang/renwu/qita.png', name: '其他' }
			],
			logoUrl: '',
			kettle: false, //水壶动画开关
			waters: false, //水滴动画开关
			current: '',
			treeStatus: 8, //根据值来控制当前状态的树
			Growthvalue: 80, //成长值
			waterShow: false, //浇水壶显示
			waterRotate: false, //水壶旋转
			shuidiShow: false, //水滴显示
			huafeiShow: false, //化肥显示
			huafeiRotate: false, //化肥旋转
			onhfShow: false, //施肥
			sunshouw: false, //太阳动画
			show: false,
			status: 2,
			stepShow: false, //果实为成熟
			myMainData: {},
			zhongziList: [],
			sunNumber: 0, //阳光数
			sunId: '', //阳光ID
			waterNumber: 0, //水滴数
			waterId: '', //水滴ID
			huafeiNumber: 0, //化肥数
			huafeiId: '', //化肥数ID
			maxCount: 0, //道具的最大限制数量
			plantGold: '', //水果兑换积分比例
			PropColor: [],
			taskList: [], //任务列表
			gameConfig: {}, //游戏配置
			myAll: {},
			myfruit:[], //我的果实
			types:'',
			bannerList:{}
		};
	},
	onShow() {
		this.gameMain();
		this.getGameComfig();
		this.getPropColor();
		this.getTaskList()
	},
	onLoad() {
		this.getBanner()
	},
	methods: {
		setTree() {
			this.current = 1;
			setTimeout(() => {
				this.current = 0;
			}, 1500);
		},
		setkettle() {
			this.kettle = true;
			setTimeout(() => {
				this.waters = true;
			}, 800);
			setTimeout(() => {
				this.waters = false;
				this.kettle = false;
				this.setTree();
			}, 1500);
		},
		setSun() {
			this.sunshouw = true;
			setTimeout(() => {
				this.setTree();
				this.sunshouw = false;
			}, 1500);
		},
		setAnimation(index) {
			this.current = index;
			setTimeout(() => {
				//重置动画
				this.current = '';
			}, 1200);
		},
		onwatering() {
			if(!this.myAll.user_plant || this.myAll.user_plant.level_title == ''){
				uni.showToast({
					title:'您还没有种植水果~',
					icon:'none'
				})
				return
			}
			//浇水动画
			if (this.waterNumber <= 0) {
				uni.showToast({
					title: '水滴数量不足~',
					icon: 'none'
				});
				return;
			}
			if(this.waterShow == true){
				uni.showToast({
					title:'操作频繁,请稍后~',
					icon:'none'
				})
				return
			}
			this.request('Prop/useProp', {
				prop_id: this.waterId
			}).then(res => {
				if (res.code == 200) {
					this.waterShow = true;
					setTimeout(() => {
						this.waterRotate = true;
					}, 500);
					setTimeout(() => {
						this.shuidiShow = true;
					}, 800);
					setTimeout(() => {
						this.shuidiShow = false;
					}, 2400);
					setTimeout(() => {
						this.waterShow = false;
						this.waterRotate = false;
						uni.showToast({
							title:'浇水成功~',
							icon:'none'
						})
					}, 2500);
					this.gameMain()
				}
			});
		},
		onshifei() {
			if(!this.myAll.user_plant || this.myAll.user_plant.level_title == ''){
				uni.showToast({
					title:'您还没有种植水果~',
					icon:'none'
				})
				return
			}
			//施肥动画
			if (this.huafeiNumber <= 0) {
				uni.showToast({
					title: '化肥数量不足~',
					icon: 'none'
				});
				return;
			}
			if(this.huafeiShow == true){
				uni.showToast({
					title:'操作频繁,请稍后~',
					icon:'none'
				})
				return
			}
			this.request('Prop/useProp', {
				prop_id: this.huafeiId
			}).then(res => {
				if (res.code == 200) {
					this.huafeiShow = true;
					setTimeout(() => {
						this.huafeiRotate = true;
					}, 500);
					setTimeout(() => {
						this.onhfShow = true;
					}, 800);
					setTimeout(() => {
						this.onhfShow = false;
					}, 2400);
					setTimeout(() => {
						this.huafeiShow = false;
						this.huafeiRotate = false;
						uni.showToast({
							title:'施肥成功~',
							icon:'none'
						})
					}, 2500);
					this.gameMain()
				}
			});
		},
		onsun() {
			//晒太阳动画
			if(!this.myAll.user_plant || this.myAll.user_plant.level_title == ''){
				uni.showToast({
					title:'您还没有种植水果~',
					icon:'none'
				})
				return
			}
			if (this.sunNumber <= 0) {
				uni.showToast({
					title: '阳光数量不足~',
					icon: 'none'
				});
				return;
			}
			if(this.sunshouw == true){
				uni.showToast({
					title:'操作频繁,请稍后~',
					icon:'none'
				})
				return
			}
			this.request('Prop/useProp', {
				prop_id: this.sunId
			}).then(res => {
				if (res.code == 200) {
					this.sunshouw = true;
					setTimeout(() => {
						this.sunshouw = false;
						uni.showToast({
							title:'光照成功~',
							icon:'none'
						})
					}, 1600);
					this.gameMain()
				}
			});
		},
		openBozhong() {
			this.$refs.sow.open();
		},
		closeSow() {
			this.$refs.sow.close();
		},
		onuseProp(item) {
			//使用道具
			this.request('Prop/useProp', {
				prop_id: item
			}).then(res => {
				console.log('使用道具', res);
			});
		},
		onsow(row) {
			//播种
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确认要种植该水果吗?',
				confirmColor: that.newColor.color,
				success: res => {
					if (res.confirm) {
						that.request('Prop/sow', {
							prop_id: row.prop_id
						}).then(res => {
							console.log(res);
							if (res.code == 200) {
								uni.showToast({
									title: '播种成功~',
									icon: 'none'
								});
								that.treeStatus = 0;
								that.current = 0;
								this.gameMain()
								setTimeout(() => {
									that.$refs.sow.close();
								}, 500);
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						});
					}
				}
			});
		},
		openWater() {
			//打开领水滴
			this.taskList = [];
			this.types = 2
			this.getTaskList(2);
			this.$refs.water.open();
		},
		closeWater() {
			//关闭领水滴
			this.$refs.water.close();
		},
		openSunshine() {
			//打开领太阳
			this.taskList = [];
			this.types = 1
			this.getTaskList(1);
			this.$refs.sunshine.open();
		},
		closeSunshine() {
			//关闭领太阳
			this.$refs.sunshine.close();
		},
		openHuafei() {
			//领化肥
			this.taskList = [];
			this.types = 3
			this.getTaskList(3);
			this.$refs.huafei.open();
		},
		closeHuafei() {
			//关闭领化肥
			this.$refs.huafei.close();
		},
		openSeed() {
			//领种子
			this.taskList = [];
			this.types = 4
			this.getTaskList(4);
			this.$refs.seed.open();
		},
		closeSeed() {
			//关闭领种子
			this.$refs.seed.close();
		},
		openWarehouse() {
			//打开仓库
			this.getReapNum()
			this.$refs.warehouse.open();
		},
		closeWarehouse() {
			//关闭仓库
			this.$refs.warehouse.close();
		},
		jumpShop() {
			//跳转到商城
			this.$Router.push({ path: '/pagesA/pages/orchard/integralShop' });
		},
		getGameComfig() {
			//获取游戏配置
			this.request('Game/getGameConfig', {}).then(res => {
				console.log('游戏配置', res);
				this.plantGold = res.data.plant_gold;
				this.gameConfig = res.data;
			});
		},
		gameMain() {
			//获取道具数
			this.request('Game/gameMain', {}).then(res => {
				console.log('道具', res);
				this.myAll = res.data;
				this.myMainData = res.data;
				this.zhongziList = res.data.user_prop.type1;
				this.maxCount = res.data.single_inventory;
				if(res.data.user_plant){
					this.treeStatus = res.data.user_plant.level - 1;
				}
				let data = res.data.user_prop.type23;
				for (var i = 0; i < data.length; i++) {
					let list = data[i];
					if (list.title == '阳光') {
						this.sunNumber = list.num;
						this.sunId = list.prop_id;
					}
					if (list.title == '水滴') {
						this.waterNumber = list.num;
						this.waterId = list.prop_id;
					}
					if (list.title == '化肥') {
						this.huafeiNumber = list.num;
						this.huafeiId = list.prop_id;
					}
				}
			});
			console.log('阳光',this.sunNumber);
		},
		getTaskList(type) {
			//获取任务列表
			if(!type){
				type = this.types
			}
			this.request('Game/getTaskList', {
				prop_type: type
			}).then(res => {
				console.log('任务列表', res);
				this.taskList = res.data;
			});
		},
		getPropColor() {
			this.request('Prop/prop3', {}).then(res => {
				console.log('土地颜色', res);
				this.PropColor = res.data;
			});
		},
		goComplete(item) {
			//任务去完成
			console.log(item);
			if (item.task_type == 2) {
				//浏览活动页
				this.onTask(item);
			} else if (item.task_type == 1) {
				//功能性任务
				if (item.id == 2) {
					//累计消费任务
					this.$Router.pushTab({ path: '/pages/tabBar/category/category' });
				} else if (item.id == 3 || 4) {
					//分享好友任务
					this.$Router.push({ path: '/pagesA/pages/user/recommend' });
				}
			} else if (item.task_type == 3) {
				//浏览指定商品
				this.request('Prop/finishTask', {
					task_id: item.id
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.$Router.push({
							path: '/pagesA/pages/goods/goodsDetails',
							query: {
									goodid: item.goods_id,
									type: 0
							}
						});
					}
				});
			}
		},
		onTask(item) {
			//完成任务 跳转类
			this.request('Prop/finishTask', {
				task_id: item.id
			}).then(res => {
				console.log(res);
				if (res.code == 200) {
					this.$Router.push({ path: '/pagesA/pages/home/limitedTime' });
				}
			});
		},
		onreceive(item) {
			//领取奖励
			this.request('Prop/finishTask', {
				task_id: item.id
			}).then(res => {
				console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: '领取成功~',
						icon: 'none'
					});
					this.$set(item, 'do', 0); //让任务变成已完成
					this.gameMain()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		getReapNum(){//获取我的果实
			this.request('Prop/getReapNum',{})
			.then(res=>{
				console.log(res);
				this.myfruit = res.data
			})
		},
		jumpNext(){//商品兑换积分
			this.$Router.push({path:'/pagesA/pages/orchard/order/myfruit'})
		},
		getBanner(){
			this.request('Game/getBanner',{})
			.then(res=>{
				console.log(res);
				this.bannerList = res.data[0]
			})
		},
		jumpGoods(){
			this.$Router.push({path: this.bannerList.link_url})
		},
		onlingqu(){//领取果实
			let that = this
			uni.showModal({
				title:'领取',
				content:'确认要领取果实吗?',
				confirmText:'领取',
				confirmColor:that.newColor.color,
				success: (res) => {
					if(res.confirm){
						that.request('Prop/reap',{})
						.then(res=>{
							console.log(res);
							if(res.code == 200){
								uni.showToast({
									title:'领取果实成功~',
									icon:'none'
								})
								that.treeStatus = 8
								that.myAll = {}
								that.gameMain()
							}
						})
					}
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.banner{
	position: fixed;
	top: 280upx;
	left: 30upx;
	image{
		width: 100upx;
		height: 100upx;
		display: block;
		border-radius: 15upx;
	}
}
@keyframes tree0 {
	0% {
		transform: scale(0.9);
	}
	20% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.1);
	}
	60% {
		transform: scale(1);
	}
	80% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes tree1 {
	0% {
		height: 190upx;
		width: 150upx;
	}
	10% {
		height: 205upx;
		width: 150upx;
	}
	20% {
		height: 215upx;
		width: 150upx;
	}
	40% {
		height: 205upx;
		width: 150upx;
	}
	60% {
		height: 213upx;
		width: 150upx;
	}
	80% {
		height: 190upx;
		width: 140upx;
	}
	100% {
		height: 180upx;
		width: 133upx;
	}
}
@keyframes tree2 {
	0% {
		height: 440upx;
		width: 265upx;
	}
	10% {
		height: 455upx;
		width: 265upx;
	}
	20% {
		height: 465upx;
		width: 265upx;
	}
	40% {
		height: 455upx;
		width: 265upx;
	}
	60% {
		height: 463upx;
		width: 265upx;
	}
	80% {
		height: 440upx;
		width: 260upx;
	}
	100% {
		height: 430upx;
		width: 257upx;
	}
}
@keyframes tree3 {
	0% {
		height: 510upx;
		width: 365upx;
	}
	10% {
		height: 525upx;
		width: 365upx;
	}
	20% {
		height: 535upx;
		width: 365upx;
	}
	40% {
		height: 525upx;
		width: 365upx;
	}
	60% {
		height: 533upx;
		width: 365upx;
	}
	80% {
		height: 506upx;
		width: 360upx;
	}
	100% {
		height: 497upx;
		width: 356upx;
	}
}
@keyframes tree4 {
	0% {
		height: 542upx;
		width: 389upx;
	}
	10% {
		height: 555upx;
		width: 389upx;
	}
	20% {
		height: 565upx;
		width: 389upx;
	}
	40% {
		height: 542upx;
		width: 389upx;
	}
	60% {
		height: 555upx;
		width: 389upx;
	}
	80% {
		height: 540upx;
		width: 382upx;
	}
	100% {
		height: 531upx;
		width: 379upx;
	}
}
@keyframes yd_img {
	0% {
		opacity: 0.5;
		transform: translate3d(0, 0, 0);
	}

	20% {
		opacity: 1;
		transform: translate3d(-150upx, -200upx, 0) scale(1.5);
	}

	30% {
		opacity: 1;
		transform: translate3d(-150upx, -200upx, 0) scale(1.5) rotate(-35deg);
	}

	80% {
		opacity: 1;
		transform: translate3d(-150upx, -200upx, 0) scale(1.5) rotate(-35deg);
	}
	80% {
		opacity: 0.6;
		transform: translate3d(-150upx, -200upx, 0) scale(1.5) rotate(-35deg);
	}
	100% {
		opacity: 0;
		transform: translate3d(-150upx, -200upx, 0) scale(1.5) rotate(0deg);
	}
}
@keyframes sunImg {
	from {
		transform: rotate(180deg) scale(1.02);
	}
	to {
		transform: rotate(360deg) scale(1);
	}
}
.orchard {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	bottom: 0;
	.bg {
		width: 100vw;
		height: 100vh;
		display: block;
	}
	.left_name {
		position: fixed;
		top: 6vh;
		left: 0upx;
		// width: 320upx;
		height: 80upx;
		overflow: hidden;
		background-color: rgba($color: #ffffff, $alpha: 0.3);
		border-top-right-radius: 40upx;
		border-bottom-right-radius: 40upx;
		text-align: left;
		.title {
			font-size: 60upx;
			color: transparentize;
			-webkit-text-stroke: 4upx #10a152;
			-webkit-text-fill-color: #ffffff;
			text-shadow: 0px 0px 20upx #10a152;
			transform: scale(0.6);
			font-weight: 800;
			float: left;
			position: relative;
			// width: 240upx;
			// white-space: nowrap;
		}
		.beilv {
			position: absolute;
			top: 0;
			left: 0;
		}
		.zhongzi {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			border: 4upx solid #10a152;
			float: right;
			image {
				width: 30px;
				height: 60upx;
				display: block;
				transform: scale(0.5);
				margin: 0 auto;
				margin-top: 8upx;
			}
		}
	}
	.mytree {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 260upx;
		// z-index: 100;
		.nozz {
			width: 186upx;
			height: 142upx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			z-index: 20;
			top: -80upx;
			image {
				width: 100%;
				height: 100%;
				display: block;
			}
			.nozz_title {
				position: absolute;
				top: 20upx;
				left: 0;
				width: 186upx;
				.p1,
				.p2 {
					font-size: 26upx;
					font-family: Source Han Sans CN;
					font-weight: 800;
					color: rgba(255, 255, 254, 1);
					line-height: 39upx;
					opacity: 0.8;
					text-align: center;
				}
			}
		}
		.haveZz {
			position: absolute;
			bottom: 50upx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 20 !important;
			.tree0 {
				width: 70upx;
				height: 90upx;
				display: block;
				// transition: all 0.5s;
			}
			.tree1 {
				width: 133upx;
				height: 180upx;
				display: block;
				// transition: all 0.5s;
			}
			.tree2 {
				width: 257upx;
				height: 430upx;
				display: block;
				// transition: all 0.5s;
				margin-right: 10upx;
			}
			.tree3 {
				width: 356upx;
				height: 497upx;
				display: block;
				// transition: all 0.5s;
			}
			.tree4 {
				width: 379upx;
				height: 531upx;
				display: block;
				// transition: all 0.5s;
			}
			.tree5 {
				width: 379upx;
				height: 531upx;
				display: block;
				// transition: all 0.5s;
			}
		}
		.active_tree0 {
			//种子的动画
			animation: tree0 0.6s;
		}
		.active_tree1 {
			//幼苗的动画
			animation: tree1 1s;
		}
		.active_tree2 {
			//小树的动画
			animation: tree2 1s;
		}
		.active_tree3 {
			//开花的动画
			animation: tree3 1s;
		}
		.active_tree4 {
			//结果的动画
			animation: tree4 1s;
		}
		.active_tree5 {
			//结果的动画
			animation: tree4 1s;
		}
		.tudi {
			width: 325upx;
			height: 123upx;
			display: block;
			overflow: hidden;
		}
	}
	.right_btn {
		position: fixed;
		bottom: 100upx;
		right: 0upx;
		.btn_lists {
			width: 100upx;
			height: 100upx;
			display: block;
			position: relative;
			.bj {
				width: 100%;
				height: 100%;
				display: block;
			}
			.qj {
				width: 100upx;
				height: 70upx;
				position: absolute;
				top: -10upx;
				left: 0;
				transition: all 1s;
			}
			.yd {
				width: 100upx;
				height: 70upx;
				position: absolute;
				top: -10upx;
				left: 0;
				transition: all 1s;
				opacity: 0;
			}
			.active_yd {
				animation: yd_img 3s;
			}
			.qj_active {
				opacity: 0;
			}
			.waters {
				top: -280upx;
				right: 280upx;
				width: 85upx;
				height: 150upx;
				opacity: 0;
			}
		}
		.sun,
		.huafei,
		.jiaoshui,
		.bozhong {
			width: 150upx;
			height: 150upx;
			transition: all 0.5s;
			position: relative;
			image {
				display: block;
				width: 100%;
				height: 100%;
				transform: 0.5s;
			}
			&:active {
				opacity: 0.6;
				transform: scale(1.2);
			}
			.icons {
				font-size: 20upx;
				color: #ffffff;
				background-color: #10a152;
				padding: 5upx 8upx;
				border-radius: 50%;
				position: absolute;
				right: 15upx;
				top: 10upx;
				line-height: 25upx;
				text-align: center;
			}
		}
	}
}
.left_top_btn {
	position: fixed;
	top: 6vh;
	right: 20upx;
	overflow: hidden;
	image {
		width: 110upx;
		height: 115upx;
		display: block;
		margin-bottom: 10upx;
		transition: all 0.6s;
		&:active {
			opacity: 0.6;
			transform: scale(1.2);
		}
	}
}
.step {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 180upx;
	width: 350upx;
	.lingqu {
		height: 62upx;
		width: 287upx;
		display: block;
		margin: 0 auto;
	}
	.beilv {
		position: absolute;
		font-size: 20upx;
		top: -25upx;
		left: 50%;
		transform: translateX(-50%);
		color: #ff433f;
	}
	.shuiguo {
		width: 50upx;
		height: 50upx;
		display: block;
		padding: 10upx;
		background-color: #ecd819;
		border: 4upx solid #10a152;
		border-radius: 50%;
		float: left;
		z-index: 10;
	}
	.step_input {
		height: 30upx;
		float: left;
		border: 4upx solid rgba(16, 161, 82, 0.8);
		border-radius: 20upx;
		width: 300upx;
		margin-top: 12upx;
		border-left: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		transform: translateX(-4upx);
		overflow: hidden;
		box-sizing: border-box;
		transition: all 0.5s;
		.setps {
			height: 24upx;
			background-color: #ecd819;
			border-top-right-radius: 20upx;
			border-bottom-right-radius: 20upx;
			transition: all 0.5s;
			image {
				width: 100%;
				height: 100%;
				transition: all 0.5s;
				display: block;
			}
		}
	}
	.chengzhang {
		width: 120upx;
		height: 80upx;
		position: absolute;
		right: -30upx;
		bottom: 10upx;
		transform: scale(0.7);
		image {
			width: 100%;
			height: 100%;
			display: block;
		}
		.p1 {
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: rgba(239, 126, 4, 1);
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
.bottom_btns {
	position: fixed;
	bottom: 20upx;
	left: 20upx;
	.btn1 {
		width: 132upx;
		height: 149upx;
		position: relative;
		float: left;
		transition: all 0.5s;
		&:active {
			opacity: 0.6;
			transform: scale(1.2);
		}
		.bgt {
			width: 100%;
			height: 100%;
			display: block;
		}
		.qjt {
			width: 68upx;
			height: 68upx;
			position: absolute;
			top: 20upx;
			left: 50%;
			transform: translateX(-50%);
		}
		text {
			font-size: 22upx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 36px;
			text-shadow: 0px 2px 2px rgba(82, 165, 41, 1);
			position: absolute;
			bottom: 5upx;
			text-align: center;
			width: 100%;
			transform: scale(0.7);
		}
		.tips {
			color: #ffffff;
			background-color: #f92d28;
			padding: 5upx 15upx;
			font-size: 22upx;
			text-align: center;
			position: absolute;
			height: 40upx;
			// line-height: 40upx;
			top: -5upx;
			right: -20upx;
			border-radius: 20upx;
			transform: scale(0.6);
		}
	}
	.btn2 {
		.bgt {
			width: 100rpx !important;
			height: 120rpx !important;
			margin-top: 10upx;
			margin-left: 18upx;
		}
		.qjt {
			width: 60upx !important;
			height: 60upx !important;
			margin-top: 10upx;
		}
	}
	.one {
		.bgt {
			margin-left: 8upx;
		}
	}
}
.operation {
	position: absolute;
	bottom: 400upx;
	right: 20%;
	transition: all 1s;
	.water {
		.waterImg {
			width: 122upx;
			height: 116upx;
			display: block;
			transition: all 1s;
			transform: rotate(30deg);
		}
		.rotateImg {
			transition: all 1s;
			transform: rotate(0deg);
		}
		.huafei {
			transition: all 1s;
			transform: rotate(-30deg);
		}
	}
	.shuidi {
		height: 80upx;
		width: 40upx;
		position: absolute;
		bottom: -60upx;
		left: -30upx;
		transition: all 0.5s;
	}
	.huafeis {
		bottom: -40upx;
	}
}
.sunlight {
	position: absolute;
	top: 20%;
	right: 10%;
	image {
		width: 280upx;
		height: 280upx;
		display: block;
		transition: all 1s;
		opacity: 0;
	}
	.onSun {
		animation: sunImg 1.6s;
		opacity: 1;
	}
}
.sow_box {
	height: 60vh;
	background-color: #fff9d0;
	border-top-left-radius: 20upx;
	border-bottom-right-radius: 20upx;
	.top {
		width: 100%;
		height: 120upx;
		background-color: #fff6b9;
		position: relative;
		.title_img {
			width: 270upx;
			height: 100upx;
			display: block;
			margin: 0 auto;
			padding-top: 10upx;
		}
		.close {
			position: absolute;
			height: 50upx;
			width: 50upx;
			right: 30upx;
			top: 20upx;
		}
	}
	.zhongzi_box {
		padding: 20upx;
		height: 45vh;
	}
	.renwu {
		height: 50vh;
		.renwu_list {
			height: 120upx;
			background: rgba(204, 254, 170, 1);
			padding: 20upx;
			border-bottom: 1upx solid #eeeeee;
			.left {
				width: 90upx;
				height: 90upx;
				position: relative;
				float: left;
				.bg {
					width: 90upx;
					height: 90upx;
					display: block;
				}
				.qj {
					width: 50upx;
					height: 50upx;
					position: absolute;
					top: 51%;
					left: 49%;
					transform: translate(-50%, -50%);
				}
			}
			.center {
				float: left;
				margin-left: 20upx;
				width: 50%;
				.p1 {
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: rgba(170, 90, 32, 1);
					line-height: 36upx;
				}
				.p2 {
					font-size: 20upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: rgba(50, 50, 50, 1);
					line-height: 36upx;
					margin-top: 10upx;
				}
			}
			.right {
				float: right;
				width: 117upx;
				height: 48upx;
				line-height: 48upx;
				background-color: #fe6c14;
				border-radius: 40upx;
				text-align: center;
				color: #ffffff;
				font-size: 22upx;
				margin-top: 20upx;
			}
		}
	}
	.box_list {
		width: 215upx;
		height: 295upx;
		background: rgba(204, 254, 170, 1);
		border-radius: 10upx;
		position: relative;
		float: left;
		margin: 0 11upx;
		margin-bottom: 20upx;
		.tuoyuan {
			width: 140upx;
			height: 140upx;
			display: block;
			margin: 0 auto;
			// padding-top: 30upx;
			transform: translateY(20upx);
		}
		.guozi {
			position: absolute;
			width: 70upx;
			height: 70upx;
			top: 50upx;
			left: 50%;
			transform: translateX(-50%);
		}
		.title {
			color: #333333;
			font-size: 24upx;
			text-align: center;
			margin-top: 40upx;
		}
		.onbozhong {
			width: 117upx;
			height: 45upx;
			line-height: 45upx;
			font-size: 20upx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			background-color: #fe6c14;
			margin: 0 auto;
			border-radius: 20upx;
			margin-top: 10upx;
			box-shadow: 0upx 0upx 10upx #eeeeee;
		}
		.number {
			height: 37upx;
			width: 66upx;
			position: absolute;
			top: 20upx;
			right: 15upx;
			image {
				width: 100%;
				height: 100%;
				display: block;
			}
			text {
				position: absolute;
				top: 50%;
				left: 50%;
				color: #ffffff;
				font-size: 20upx;
				transform: translate(-50%, -50%);
			}
		}
	}
	.tips {
		text-align: center;
		font-size: 20upx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: rgba(179, 104, 6, 1);
		margin-top: 10upx;
	}
	.myfruit,
	.myprop {
		padding: 20upx 30upx;
		padding-bottom: 0;
		.title {
			font-size: 28upx;
			font-weight: bold;
		}
		.fr_scroll {
			height: 150upx;
			margin-top: 20upx;
			white-space: nowrap;
			overflow-x: auto;
			.lists {
				height: 140upx;
				width: 330upx;
				background: rgba(204, 254, 170, 1);
				border-radius: 10upx;
				display: inline-block;
				box-sizing: border-box;
				padding: 10upx 10upx;
				margin-right: 20upx;
				.left {
					height: 120upx;
					width: 120upx;
					position: relative;
					float: left;
					.bj {
						width: 100%;
						height: 100%;
						display: block;
					}
					.qj {
						width: 60upx;
						height: 60upx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
				.right {
					float: left;
					margin-top: 10upx;
					margin-left: 10upx;
					.p1 {
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: rgba(170, 90, 32, 1);
						line-height: 36upx;
					}
					.p2 {
						width: 110upx;
						height: 40upx;
						background: rgba(254, 108, 20, 1);
						border-radius: 20upx;
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
						line-height: 40upx;
						text-align: center;
						margin-top: 25upx;
					}
				}
			}
			.notfruit{
				padding-top: 20upx;
				font-size: 26upx;
				color: #333333;
			}
		}
	}
	.myfruit {
		height: 18vh;
	}
	.myprop {
		margin-top: 20upx;
		.myprop_box {
			margin-top: 20upx;
			height: 25vh;
			.prop_list {
				width: 200upx;
				height: 220upx;
				background: rgba(204, 254, 170, 1);
				border-radius: 10upx;
				overflow: hidden;
				display: inline-block;
				margin: 0 15upx;
				margin-bottom: 20upx;
				image {
					width: 110upx;
					height: 110upx;
					display: block;
					margin: 0 auto;
					margin-top: 10upx;
				}
				.p1 {
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: rgba(170, 90, 32, 1);
					text-align: center;
					margin-top: 10upx;
				}
				.p2 {
					font-size: 20upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					margin-top: 10upx;
					text-align: center;
				}
			}
		}
	}
}
</style>
